<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jquery/jquery-3.3.1.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!--
.list-group 代表列表组
.badge 代表状态数
.active 代表选中状态
-->
<ul class="list-group">
    <li class="list-group-item active">
        这是一个列表
        <span class="badge">14</span>
    </li>
    <li class="list-group-item disabled" >
        这是一个列表
        <span class="badge">20</span>
    </li>
    <li class="list-group-item list-group-item-danger">
        这是一个列表
        <span class="badge">80</span>
    </li>
</ul>

</body>
</html>